<template>
  <div class="inOut">
    <el-form :model="searchForm">
      <el-form-item>
        <el-input placeholder="停车场/车主姓名/手机号" style="width: 190px;"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="入场车牌"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="订单号"></el-input>
      </el-form-item>

      <!-- <el-form-item>
        <el-select v-model="value" placeholder="选择车牌类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item> -->

      <!-- <el-form-item>
        <el-select v-model="value" placeholder="选择订单状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item> -->
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="orderId" label="订单号" align="center">
      </el-table-column>
      <el-table-column prop="parkName" label="停车场" align="center">
      </el-table-column>
      <el-table-column prop="userName" label="用户名称" align="center">
      </el-table-column>
      <el-table-column prop="carCardNum" label="入场车牌" align="center">
      </el-table-column>
      <el-table-column prop="carType" label="车牌类型" align="center">
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.orderStatus | orderFilter}}
        </template>
      </el-table-column>
      <el-table-column prop="carInTime" label="入场时间" align="center">
      </el-table-column>
      <el-table-column prop="carOutTime" label="出场时间" align="center">
      </el-table-column>
      <el-table-column prop="parkDuration" label="停车时长(时)" align="center">
      </el-table-column>
      <el-table-column prop="outMsg" label="出场异常信息" align="center">
      </el-table-column>
      <el-table-column prop="outType" label="出场类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.outType | outTypeFilter}}
        </template>
      </el-table-column>
      <el-table-column prop="payMsg" label="支付异常信息" align="center">
      </el-table-column>
      <el-table-column label="支付状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.payStatus | payStatusFilter}}
        </template>
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" align="center">
      </el-table-column>
      <el-table-column label="支付类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.payType | payTypeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="detailsShow = true;id=scope.row.orderId">订单详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination :hide-on-single-page="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.current" :page-sizes="[10, 15, 20, 30]" :page-size="10" background layout="total, sizes, prev, pager, next, jumper" :total="total" align="center" style="margin-top:30px;">
    </el-pagination>

    <el-dialog title="查看详情" :visible.sync="detailsShow" width="400px">
      <Details v-if="detailsShow" :id="id"/>
    </el-dialog>
  </div>
</template>

<script>
  import Details from './components/orderDetails.vue'

export default{
	components:{
    Details
	},
  filters: {
    orderFilter(orderStatus) {
      switch (orderStatus) {
        case 1: return '已入场，待支付';
        break;
        case 2: return '已支付，待出场';
        break;
        case 3: return '已支付，已出场';
        break;
        case 4: return '已出场，未支付';
        break;
      }
    },
    outTypeFilter(outType) {
      switch(outType) {
        case 1: return '正常出场';
        break;
        case 2: return '异常出场';
        break;
      }
    },
    payStatusFilter(payStatus) {
      switch(payStatus) {
        case 0: return '待支付';
        break;
        case 1: return '已支付';
        break;
        case 2: return '取消支付';
        break;
        case 3: return '支付失败';
      }
    },
    payTypeFilter(payType) {
      switch(payType) {
        case 1: return '月租卡';
        break;
        case 2: return '时长卡';
        break;
        case 3: return '其他';
      }
    }
  },
	name:'inOut',
	data(){
		return{
      searchForm: {
        size: 10,
        current: 1
      },
      value: '',
      tableData: [],
      detailsShow: false,
      total: null
		}
	},
	mounted(){
    this.getTableData();
	},
	methods:{
    getTableData() {
      this.$axios({
        method: 'post',
        url: '/order/orderInfo/getOrderByManage',
        data: this.searchForm
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    //分页修改每页显示条数
    handleSizeChange(val){
      this.searchForm.size = val;
      this.getTableData();
    },
    //分页跳转页面
    handleCurrentChange(val){
      this.searchForm.current = val;
      this.getTableData();
    },
	}
}
</script>

<style scoped>
  .inOut {
    padding: 40px;
  }
  .el-form-item {
    display: inline-block;
  }
  .el-input {
    width: 120px;
  }
  .el-select {
    width: 140px;
  }


</style>
